<template>
  <div class="tab_home">
    <!-- 通知和搜索 -->
    <div>
      <van-search placeholder="搜索" background="#E8E8E8" @click="$router.push({ name: 'search' })" />
    </div>

    <!-- banner  暂定高230  宽100% -->
    <van-swipe :autoplay="3000" indicator-color="white" class="banner">
      <van-swipe-item v-for="(banner, index) in shopInfos.banner" :key="index">
        <img :src="banner.url" @click="bannerTo(banner.link)" />
      </van-swipe-item>
    </van-swipe>

    <!-- 产品中心 -->
    <div
      class="product_center"
      :style="{backgroundImage: 'url('+ product_center.url +')'}"
      @click="bannerTo(newBottom.link)"
    >
      <span>产品中心</span>
    </div>

    <!-- 热销商品列表 -->
    <div style="background-color:#fff;">
      <van-row gutter="10" style="margin-left:0;margin-right:0;">
        <van-col
          span="12"
          style="padding:2px"
          v-for="(hotGood ,index) in shopInfos.hotGoodsList"
          :key="index"
        >
          <div
            style="box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);border-radius:5px;overflow:hidden;position:relative;"
          >
            <router-link :to="{ path: `/items/detail/${hotGood.id}`}">
              <div style="width:100%;height:0px;padding-bottom:100%;overflow:hidden;margin:0;">
                <img v-lazy="hotGood.picUrl" style="width:100%;background-color:#fff;" />
              </div>
            </router-link>
            <span class="goods_name">
              <img :src="factory_outlet_tag" height="14px" style="margin-bottom:-3px;" />
              {{hotGood.name}}
            </span>
            <div style="width:100%;height:38px;">
              <span class="goods_price" style="color:red;padding-left:6px;">￥{{hotGood.retailPrice}}</span>
              <span class="get_price">到手价</span>
              <br />
              <span class="couter_price">{{hotGood.counterPrice == 0?'':'￥'+hotGood.counterPrice}}</span>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 商品分类 -->
    <div
      @click="changeTabbar(channel)"
      v-for="(channel, index) in shopInfos.channel"
      :key="index"
      class="goods_channel"
    >
      <img :src="channel.picUrl" width="100%" height="88px" />
      <div>
        <span>{{channel.name}}</span>
      </div>
    </div>

    <!-- 活动中心 -->
    <div
      class="activities_center"
      :style="{backgroundImage: 'url('+ activities_center.url +')'}"
      @click="bannerTo(newBottom.link)"
    >
      <span>活动中心</span>
    </div>
  </div>
</template>

<script>
import { getHome, goodsCategory, adList } from '@/api/api';
import scrollFixed from '@/mixin/scroll-fixed';
import _ from 'lodash';
import hot_tag from '@/assets/images/hot.png';
import factory_outlet_tag from '@/assets/images/factory_outlet.png';
import bottom_tag from '@/assets/images/bottom_tag.png';

import {
  List,
  Swipe,
  SwipeItem,
  Tabbar,
  TabbarItem,
  Image,
  Search,
  Toast,
  Card,
  Row,
  Col,
  Tag
} from 'vant';

export default {
  name: 'hot-sale',
  mixins: [scrollFixed],

  data() {
    return {
      shopInfos: [],
      isLoading: false,
      cartInfo: 0,
      propsPopup: false,
      product_center: {},
      activities_center: {},
      hot_tag: hot_tag,
      factory_outlet_tag: factory_outlet_tag,
      bottom_tag: bottom_tag
    };
  },

  created() {
    this.initViews();
  },

  methods: {
    isNotEmpty(img) {
      if (img == undefined || img == null || img == '') {
        return false;
      } else {
        return true;
      }
    },
    bannerTo(link) {
      this.$router.push({ path: link });
    },
    goDetail(id) {
      return `#/items/detail/${id}`;
    },
    changeTabbar(o) {
      goodsCategory({ id: o.id }).then(res => {
        //let categoryId = res.data.data.currentCategory.id;  //子级分类id
        let categoryId = o.id;
        this.$router.push({
          name: 'category',
          query: { itemClass: categoryId }
        });
      });
    },
    initViews() {
      let type = 'hot_sale';
      adList({ position: 4 }).then(res => {
        this.product_center = res.data.data.list[0];
      });
      adList({ position: 5 }).then(res => {
        this.activities_center = res.data.data.list[0];
      });
      getHome().then(res => {
        this.shopInfos = res.data.data;
      });
    }
  },

  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Card.name]: Card,
    [Toast.name]: Toast,
    [Search.name]: Search,
    [List.name]: List,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Tag.name]: Tag,
    [Image.name]: Image
  }
};
</script>


<style lang="scss" scoped>
.demo-sku {
  .sku-container {
    padding: 0 15px;
  }
}
.banner {
  height: 342px;
}
.banner img {
  height: 342px;
  width: 100%;
}
.product_center {
  height: 97px;
  text-align: center;
  background-size: 100%;
}
.product_center span {
  color: #fff;
  font-size: 28px;
  line-height: 97px;
}
.goods_channel {
  height: 88px;
  position: relative;
}
.goods_channel div {
  width: 50%;
  height: 41px;
  background-color: rgba(139, 139, 140, 0.2);
  position: absolute;
  top: 25.5px;
  left: 24vw;
  text-align: center;
}
.goods_channel div span {
  color: #333435;
  font-size: 22px;
  line-height: 41px;
}
.activities_center {
  height: 97px;
  text-align: center;
  background-size: 100%;
}
.activities_center span {
  color: #fff;
  font-size: 28px;
  line-height: 97px;
}
.goods_name {
  padding-left: 6px;
  font-size: 13px;
  height: 25px;
  line-height: 30px;
  font-weight: bold;
  font-family: Arial;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  position: relative;
  color: #323233;
}
.goods_price {
  font-weight: bold;
  padding-left: 6px;
  display: inline-block;
  color: #000;
  height: 14px;
  line-height: 14px;
  text-align: left;
}
.get_price {
  color: red;
  padding: 0 4px;
  border: 0.2px solid red;
  border-radius: 3px;
  font-size: 10px;
  display: inline-block;
  margin-left: 4px;
  transform: scale(0.8);
  transform-origin: -10px -3px;
}
.couter_price {
  display: inline-block;
  font-size: 12px;
  color: #8e8e8e;
  transform: scale(0.8);
  transform-origin: 10px -25px;
  padding-left: 8px;
  text-decoration: line-through;
}
</style>
